<script>
import Focus from '@/components/focus';

export default {
  components: {
    Focus,
  },
  data() {
    const solution = this.$const.SOLUTION_ICON;
    return {
      game: [solution.game1, solution.game2], // 游戏玩家社区解决方案
      gameText: {
        txt1: '游戏玩家交流与公会运营',
        txt2: '游戏公司、公会组织、游戏媒体',
        txt3: '玩家数据互通、积分兑换、商城',
      },
      gameBaseFeature: [
        {
          img: solution.tupian,
          text: '图文帖子',
        },
        {
          img: solution.shipin,
          text: '视频',
        },
        {
          img: solution.huodong,
          text: '活动',
        },
        {
          img: solution.sixin,
          text: '私信',
        },
        {
          img: solution.biaodan,
          text: '表单',
        },
      ],
      gameSpecailFeature: [
        {
          img: solution.zhibo,
          text: '直播',
        },
        {
          img: solution.saishi,
          text: '赛事',
        },
        {
          img: solution.h5,
          text: 'H5',
        },
        {
          img: solution.dashang,
          text: '打赏',
        },
        {
          img: solution.baoming,
          text: '报名',
        },
      ],
      brand: [solution.brand1, solution.brand2], // 品牌IP社区解决方案
      brandText: {
        txt1: '泛娱乐 IP 与知名品牌的互动社区',
        txt2: '娱乐 IP、演艺制作、消费者品牌',
        txt3: '小游戏、抽奖、CRM、直播',
      },
      brandBaseFeature: [],
      brandSpecailFeature: [
        {
          img: solution.toupiao,
          text: '投票',
        },
        {
          img: solution.zhishiku,
          text: '知识库',
        },
        {
          img: solution.kaquan,
          text: '卡券',
        },
        {
          img: solution.baoming,
          text: '报名',
        },
      ],
      business: [solution.business1, solution.business2], // 企业会员客服解决方案
      businessText: {
        txt1: '企业产品客服与会员互动场景',
        txt2: '消费品牌、C 端产品、企业',
        txt3: '票务、卡券核销、CRM、智能客服',
      },
      businessBaseFeature: [],
      businessSpecailFeature: [
        {
          img: solution.wenda,
          text: '问答',
        },
        {
          img: solution.zhishiku,
          text: '知识库',
        },
        {
          img: solution.fuli,
          text: '福利',
        },
        {
          img: solution.kaquan,
          text: '卡券',
        },
        {
          img: solution.baoming,
          text: '报名',
        },
      ],
      fans: [solution.fans1, solution.fans2], // 明星粉丝社区解决方案
      fansText: {
        txt1: '明星粉丝交流与后援会应援运营',
        txt2: '艺人经纪、会展演艺、明星后援会',
        txt3: '二手交易、音乐点播、直播',
      },
      fansSpecailFeature: [
        {
          img: solution.dabang,
          text: '打榜',
        },
        {
          img: solution.shagncheng,
          text: '周边商城',
        },
        {
          img: solution.piaowu,
          text: '票务',
        },
        {
          img: solution.liebian,
          text: '裂变',
        },
        {
          img: solution.baoming,
          text: '报名',
        },
      ],
      media: [solution.fasion1, solution.fasion2], // 自媒体内容付费解决方案
      mediaText: {
        txt1: '公众号大 V 的付费内容场景',
        txt2: '微信公众号、INS、FB、知乎大 V',
        txt3: '商城、抽奖、订阅',
      },
      mediaSpecailFeature: [
        {
          img: solution.dashang,
          text: '打赏',
        },
        {
          img: solution.huiyuan,
          text: '付费会员',
        },
        {
          img: solution.jiaoyi,
          text: '交易',
        },
      ],
      interest: [solution.interest1, solution.interest2], // 兴趣公益社团组织解决方案
      interestText: {
        txt1: '兴趣话题与公益组织交流',
        txt2: '发烧友俱乐部、公益组织',
        txt3: '二手交易、信用查询、微信支付',
      },
      interestSpecailFeature: [
        {
          img: solution.dashang,
          text: '打赏',
        },
        {
          img: solution.shejiao,
          text: '社交',
        },
        {
          img: solution.dianshang,
          text: '电商',
        },
        {
          img: solution.ershou,
          text: '二手',
        },
        {
          img: solution.baoming,
          text: '活动报名',
        },
      ],
      // 企业内网员工交流论坛解决方案
      busi: [solution['business-inner1'], solution['business-inner2']],
      busiText: {
        txt1: '大型企业内部私密交流场景',
        txt2: '大型企事业组织、连锁型企业',
        txt3: '私有化部署、数据加密、OA 打通',
      },
      busiSpecailFeature: [
        {
          img: solution.toupiao,
          text: '投票',
        },
        {
          img: solution.dabang,
          text: '打榜',
        },
        {
          img: solution.h5,
          text: 'H5',
        },
        {
          img: solution.dashang,
          text: '打赏',
        },
        {
          img: solution.baoming,
          text: '报名',
        },
      ],
      gov: [solution.gov1, solution.gov2], // 城市政务民生交流解决方案
      govText: {
        txt1: '城镇居民交流场景',
        txt2: '政务平台、地方社区、村镇社区',
        txt3: '招聘、二手、信息分类、电商',
      },
      govSpecailFeature: [
        {
          img: solution.toupiao,
          text: '投票',
        },
        {
          img: solution.baoming,
          text: '报名',
        },
        {
          img: solution.xinxichaxun,
          text: '信息查询',
        },
      ],
    };
  },
  created() {},
  methods: {},
};
</script>

<template>
  <section class="dzq-layout__content">
    <dz-page-header>
      <template slot="title">Discuz! Q 的解决方案</template>
      Discuz! Q 面向不同的业务场景，提供整套行业解决方案。Discuz! Q
      解决方案涵盖门店移动化、私域流量、社交电商、企业IT协作、政务民生互动、会员粉丝社区、企业产品客服、企业知产数字化等领域。
    </dz-page-header>
    <dz-section title="游戏玩家社区解决方案" class="zdzq-solution">
      <dz-solution-item
        :text="gameText"
        :base-feature="gameBaseFeature"
        :specail-feature="gameSpecailFeature"
      ></dz-solution-item>
      <dz-swipe :imgs="game"></dz-swipe>
    </dz-section>
    <dz-section title="品牌IP社区解决方案" class="zdzq-solution dzq-index-section--lightbg">
      <dz-solution-item
        :text="brandText"
        :base-feature="gameBaseFeature"
        :specail-feature="brandSpecailFeature"
      ></dz-solution-item>
      <dz-swipe :imgs="brand"></dz-swipe>
    </dz-section>
    <dz-section title="企业会员客服解决方案" class="zdzq-solution">
      <dz-solution-item
        :text="businessText"
        :base-feature="gameBaseFeature"
        :specail-feature="businessSpecailFeature"
      ></dz-solution-item>
      <dz-swipe :imgs="business"></dz-swipe>
    </dz-section>
    <dz-section title="明星粉丝社区解决方案" class="zdzq-solution dzq-index-section--lightbg">
      <dz-solution-item
        :text="fansText"
        :base-feature="gameBaseFeature"
        :specail-feature="fansSpecailFeature"
      ></dz-solution-item>
      <dz-swipe :imgs="fans"></dz-swipe>
    </dz-section>
    <dz-section title="自媒体内容付费解决方案" class="zdzq-solution">
      <dz-solution-item
        :text="mediaText"
        :base-feature="gameBaseFeature"
        :specail-feature="mediaSpecailFeature"
      ></dz-solution-item>
      <dz-swipe :imgs="media"></dz-swipe>
    </dz-section>
    <dz-section title="兴趣公益社团组织解决方案" class="zdzq-solution dzq-index-section--lightbg">
      <dz-solution-item
        :text="interestText"
        :base-feature="gameBaseFeature"
        :specail-feature="interestSpecailFeature"
      ></dz-solution-item>
      <dz-swipe :imgs="interest"></dz-swipe>
    </dz-section>
    <dz-section title="企业内网员工交流论坛解决方案" class="zdzq-solution">
      <dz-solution-item
        :text="busiText"
        :base-feature="gameBaseFeature"
        :specail-feature="busiSpecailFeature"
      ></dz-solution-item>
      <dz-swipe :imgs="busi"></dz-swipe>
    </dz-section>
    <dz-section title="城市政务民生交流解决方案" class="zdzq-solution dzq-index-section--lightbg">
      <dz-solution-item
        :text="govText"
        :base-feature="gameBaseFeature"
        :specail-feature="govSpecailFeature"
      ></dz-solution-item>
      <dz-swipe :imgs="gov"></dz-swipe>
    </dz-section>
    <Focus />
  </section>
</template>

<style lang="scss">
.zdzq-solution {
  .zdzq-bd {
    display: flex;
  }
  .zdzq-section-left {
    margin-left: 73px;
    margin-right: 60px;
    flex: 1;
  }
  .zdzq-section-right {
    width: 506px;
    font-size: 0;
  }
  &-item {
    padding: 20px 0;
    .zdzq-item__content {
      display: inline-block;
      width: 20%;
      img {
        width: 42px;
        height: auto;
      }
      p {
        font-size: 14px;
        line-height: 26px;
        color: #a0afc3;
      }
    }
    .zdzq-content-center {
      display: inline-block;
      text-align: center;
    }
  }
  &__title {
    height: 36px;
    font-size: 16px;
    line-height: 26px;
    color: #242d4e;
  }
  &__line {
    max-width: 500px;
    height: 2px;
    background-image: linear-gradient(#dadada, #dadada), linear-gradient(#fff, #fff);
    background-blend-mode: normal, normal;
    opacity: 0.6;
  }
  &-img {
    display: inline-block;
    width: 240px;
    height: auto;
    &:first-child {
      margin-right: 25px;
    }
  }
  &-desc {
    margin-bottom: 23px;
    font-size: 16px;
    line-height: 26px;
    color: #a0afc4;
    .black {
      font-weight: bold;
    }
  }
}

@media screen and (max-width: 768px) {
  .zdzq-solution {
    .zdzq-bd {
      display: block;
    }
    .zdzq-section-left {
      margin: 0;
    }
    .zdzq-section-right {
      margin-top: 20px;
      width: 100%;
    }
    .zdzq-solution-img {
      width: 100%;
      max-width: 300px;
      margin: 0;
    }
    &-desc {
      margin-bottom: 13px;
      font-size: 15px;
      .black {
        font-weight: normal;
      }
    }
    &-item {
      padding: 0 0 15px;
      .zdzq-item__content {
        img {
          width: 35px;
        }
        p {
          font-size: 12px;
          line-height: 13px;
        }
      }
    }
    &__line {
      display: none;
    }
  }
  .zdzq-pc-img {
    display: none;
  }
}
</style>
